<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./6-表单案例.css">
</head>

<body>
  <div class="container">
    <h1>BILIBILI</h1>
    <form action="">
      <input class="tbx" type="text" placeholder="点赞">
      <input class="tbx" type="text" placeholder="投币">
      <input class="btn" type="button" value="一键三连">
    </form>
  </div>
  <script>
    // 1 定义绑定类
    const con = document.querySelector('.container');
    // 2 定义两个函数开关
    let isIn = true;
    let isOut = false;
    // 3 监听鼠标进入进出
    con.addEventListener('mouseenter', (e) => {
      if (isIn) {
        // 获取进入的鼠标位置
        // 位置 = 进入点 距离 窗口的位置 - 父窗口距离窗口的位置
        let inx = e.pageX - e.target.offsetLeft;
        let iny = e.pageY - e.target.offsetTop;
        // // 4 创建一个 span 元素，并且给与对应的出生坐标
        let el = document.createElement('span');
        el.style.left = inx + 'px';
        el.style.top = iny + 'px';
        // // 5 添加子元素到对应的父节点
        con.appendChild(el);
        // // 6 添加样式(添加节点后才找得到)
        var span = document.querySelector('.container span');
        span.classList.remove('out');
        span.classList.add('in');
        isIn = false;
        isOut = true;
      }
    })
    // 7 监听鼠标出来
    con.addEventListener('mouseleave', (e) => {
      if (isOut) {
        // 获取进入的鼠标位置
        // 位置 = 进入点 距离 窗口的位置 - 父窗口距离窗口的位置
        let inx = e.pageX - e.target.offsetLeft;
        let iny = e.pageY - e.target.offsetTop;
        // 8 添加样式
        span = document.querySelector('.container span')
        span.classList.remove('in');
        span.classList.add('out');
        span.style.left = inx + 'px';
        span.style.top = iny + 'px';
        isOut = false;
        // 10 当动画结束后再删除节点
        setTimeout(() => {
          con.removeChild(span);  // 删除元素
          isIn = true;
        }, 500);
      }
    })
  </script>
</body>

</html>